<template>
    <el-form :model="attrForm" ref="attrForm" v-if="categoryData !== ''">
        <el-form-item 
            v-for="(domain, index) in attrForm.domains"
            :key="domain.key"
            :label="(type ? '规格' : '属性') + (index + 1)"
            :prop="domain.filename"
            :rules="{required: true, message: (type ? '规格' : '属性') + '不能为空', trigger: 'blur'}">
        
            <div class="inputAndDel">
                <el-input v-model="domain.value"></el-input>
                <el-button type="danger" @click.prevent="removeDomain(domain)" v-show="attrCurrent.indexOf(domain.value) != -1 || domain.value == ''">删除</el-button>
                <el-button type="danger" @click.prevent="removeDomain(domain)" disabled v-show="attrCurrent.indexOf(domain.value) == -1 && domain.value != ''">删除</el-button>
            </div>
        
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('attrForm')">提交</el-button>
            <el-button type="success" @click="addDomain('')">新增{{ type ? '规格' : '属性' }}</el-button>
            <el-button type="info" @click="resetForm('attrForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import { get, post } from '@/plugins/axios.js'
    import { url } from './api.js'
    export default {
        name: 'AttrForm',
        props: ['attrCurrent', 'attrForm', 'attrName', 'attrData', 'categoryData', 'type'],
        data() {
            return {
                
            }
        },
        methods: {
            submitForm() {
                this.$refs.attrForm.validate((valid) => {
                    if (valid) {
                        let nameArray = []
                        for (const key in this.attrForm.domains) {
                            if(!Object.hasOwnProperty.call(this.attrName, key)) {
                                nameArray.push(this.attrForm.domains[key].value)
                            }
                        }
                        console.dir(nameArray)
                        console.dir(this.categoryData.id)
                        post(url.add, {names: nameArray, categoryId: this.categoryData.id, type: parseInt(this.type)}, content => {
                            this.attrForm.domains = []
                            this.$emit('update:attrForm', this.attrForm)
                            this.$emit('update:attrName', [])
                            this.$emit('getAttrData', this.categoryData.id)
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '提交出现错误'
                        });
                        return false;
                    }
                });
            },
            resetForm() {
                this.attrForm.domains = []
                this.$emit('update:attrForm', this.attrForm)
                for(const key in this.attrName) {
                    this.addDomain(this.attrName[key])
                }
            },
            removeDomain(item) {
                if(item.value == '') {
                    var index = this.attrForm.domains.indexOf(item)
                    if (index !== -1) {
                        this.$emit('attrFormSpliceOne', index)
                    }
                    return
                }
                if (this.attrName.indexOf(item.value) !== -1) {
                    this.$confirm('此操作将删除该属性, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let id = ""
                        let k = 0
                        for (const key in this.attrData) {
                            if (this.attrData[key].name === item.value) {
                                id = this.attrData[key].id
                                k = key
                            }
                        }
                        get(url.delete, { id: id }, content => {
                            this.$emit('attrDataSpliceOne', k)
                            this.$emit('attrNameSpliceOne', this.attrName.indexOf(item.value))

                            var index = this.attrForm.domains.indexOf(item)
                            if (index !== -1) {
                                this.$emit('attrFormSpliceOne', index)
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                    });
                }
            },
            addDomain(val) {
                this.$emit('addToArray', {
                    value: val, 
                    key: Date.now() + Math.random().toString(16)
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .el-form {
        padding: 0 10%;
    }
    .el-form-item {
        text-align: center;
        display: flex;
        justify-content: center;
    }
    /deep/ .el-form-item__label {
        min-width: 80px;
    }
    /deep/ .el-form-item__content {
        min-width: 282.5px !important;
    }
    .inputAndDel {
        display: flex;
        gap: 5%;
    }
</style>